<template lang="pug">
  el-dialog.tl(
  :title="`选择${label}`"
  :width="width"
  :visible="visibleDialog"
  append-to-body
  center
  v-el-drag-dialog
  @close="$_handleCancel"
  )
    div(class="table")
      s-table(
        ref="table"
        :reqUrl="reqUrl"
        :reqMethod="reqMethod"
        :callback="callback"
        :column="column"
        :filterProps="{ fields: searchConfig, showBtns }"
        :queryPropsParams="queryPropsParams"
        style="padding: 0"
        :selection="true"
        @selection-change="handleSelectionChange"
      )
        .table-operator(slot="table-operator")
          slot(name="table-operator")
    p.tr(style="margin-top: 40px")
      el-button(@click="$_handleCancel" round) 取消
      el-button.gradientVertical(@click="submitHandle" round) 确定
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    // 列表接口
    reqUrl: {
      type: String,
      default: ''
    },
    reqMethod: {
      type: String,
      default: 'POST'
    },
    queryPropsParams: {
      type: Object,
      default: () => {}
    },
    // 标题
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: Object,
      default: () => ({ label: 'name', value: 'id' })
    },
    width: {
      type: String,
      default: '920px'
    },
    column: {
      type: Array,
      default: () => ([])
    },
    searchConfig: {
      type: [Function, Array],
      default: () => ([])
    },
    visible: {
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: false
    },
    showBtns: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      chosedRows: []
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.refreshTable()
        }
      }
    }
  },
  methods: {
    refreshTable (flag = false) {
      if (this.$refs.table) {
        this.$refs.table.refresh(flag)
      }
    },

    handleSelectionChange (rows) {
      console.log(rows)

      if (this.single) {
        if (rows.length > 1) {
          const row = rows.pop()
          this.$refs.table.$refs.table.clearSelection()
          this.$refs.table.$refs.table.toggleRowSelection(row)
          this.chosedRows = [row]
          return
        }
      }
      console.log(rows)
      this.chosedRows = rows
    },

    submitHandle () {
      this.$emit('sureHandle', [...this.chosedRows, ...this.value])
      this.$_handleCancel()
    },

    $_handleCancel () {
      this.$refs.table.$refs.table.clearSelection()
      this.visibleDialog = false
    },

    callback ({ res, parameter }) {
      console.log(res)
      let content = []
      if (Array.isArray(res)) {
        content = res
      } else {
        content = res.content
      }
      setTimeout(() => {
        content.forEach(row => {
          for (let i = this.value.length - 1; i >= 0; i--) {
            const value = this.value[i]
            if (row.id === value.id) {
              this.$refs.table.$refs.table.toggleRowSelection(row, true)
              this.value.splice(i, 1)
            }
          }
        })
      }, 200)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

